﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
 
        body
        {
            background-color: #D9DFE3;
        }        
        .act_drag_container
        {
            width: 860px;
            height: 350px;
            position: relative;
            
        }
        
        .drag_box
        {
            width: 188px;
            height: 130px;
            background-color: #fff;
            position:absolute;
           
            -moz-box-shadow: 0px 0px 20px #333333;
            -webkit-box-shadow: 0px 0px 20px #333333;
            box-shadow: 0px 0px 20px #333333;
        }
        
        
        #draggable_1
        {
            left: 30px; /*top: 149px;*/
            top: 34px;
            -moz-transform: rotate(-10deg);
            -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
        }
        
        #draggable_2
        {
            left: 109px; /*top: 239px;*/
            top: 124px;
            -moz-transform: rotate(10deg);
            -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
        }
        
        #draggable_3
        {
            left: 328px;
            top: 135px;
            -moz-transform: rotate(10deg);
            -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
        }
        
        #draggable_4
        {
            left: 464px; /*top: 198px;*/
            top: 83px;
            -moz-transform: rotate(-10deg);
            -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
        }
        
        #draggable_5
        {
            left: 664px;
            top: 30px; /*top: 145px;*/
            -moz-transform: rotate(10deg);
            -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
        }
        
        #draggable_6
        {
            left: 645px;
            top: 142px; /*top: 275px;*/
            -moz-transform: rotate(-2deg);
            -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
        }
    </style>
    <script src="jquery-ui-1.9.0.custom/js/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js" type="text/javascript"></script>
</head>
<body>
    <div class="act_drag_container">
        <div class="drag_box" id="draggable_1">
        </div>
        <div class="drag_box" id="draggable_2">
        </div>
        <div class="drag_box" id="draggable_3">
        </div>
        <div class="drag_box" id="draggable_4">
        </div>
        <div class="drag_box" id="draggable_5">
        </div>
        <div class="drag_box" id="draggable_6">
        </div>
    </div>
    <script type="text/javascript">
        $(".drag_box").draggable({
            revert: true,
            containment: "document",
            zIndex: 100
        });
    </script>


      <script type="text/javascript">
          $(".drag_box").draggable({
              revert: true,
              revertDuration: "300",
              containment: "act_content",
              zIndex: 100
          });


          $(".sequen_placeholder").droppable({
              tolerance: "pointer",
              drop: function (event, ui) {

                  if ($(this).children().length == 1) {

                      var children = $(this).children();

                      var offset_child = calcOffset($(this).children().offset(), ui.draggable.parent().offset());
                      var offset_drag = calcOffset(ui.draggable.offset(), $(this).offset());

                      children.appendTo(ui.draggable.parent());
                      ui.draggable.appendTo(this);

                      children.css(offset_child);
                      children.animate({ "left": "0", "top": "0" }, 900);

                      ui.draggable.css(offset_drag);
                      ui.draggable.animate({ "left": "0", "top": "0" }, 900);

                      return;
                  }

                  var offset = calcOffset(ui.draggable.offset(), $(this).offset());

                  ui.draggable.appendTo(this);


                  //ui.draggable.css(offset);

                  ui.draggable.css({ "left": "0px", "top": "0px", "width": "135px", "height": "90px" });
                  ui.draggable.find(".img_box").animate({ "left": "0px", "top": "0px", "width": "105px", "height": "64px" }, 900);
                  ui.draggable.animate({ "left": "0px", "top": "0px", "width": "135px", "height": "90px" }, {
                      step: function (now, fx) {
                          $(this).css('-webkit-transform', 'rotate(0deg)');
                          $(this).css('-moz-transform', 'rotate(0deg)');
                          $(this).css('transform', 'rotate(0deg)');
                      }, duration: 'fast'
                  }, 900);
              }
          });


          function calcOffset(setA, setB) {
              return {
                  "left": parseInt(setA.left - setB.left, 10),
                  "top": parseInt(setA.top - setB.top, 10)
              }
          }
    </script>
</body>
</html>
